<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:100px;height:110px;}
    </style>
</head>
<body>
    <div class="box" style="background:red"></div>
</body>
<script>

    var box = document.querySelector(".box")
    // 行内样式的获取
    // console.log(box.style);
    // console.log(box.style.background);
    // 行内样式的设置
    // box.style.background = "green";
    // box.style.border = "solid 10px black";
    // 样式操作中没有删除的概念，只有清空或设置为默认值
    // box.style.background = "";
    // 行内样式的操作，不能控制非行内
    // console.log(box.style.width);

    // 非行内样式的获取
    // console.log(getComputedStyle(box));
    // console.log(getComputedStyle(box).width);
    // console.log(getComputedStyle(box).height);
    // 非行内样式无法修改，可以通过修改行内样式，覆盖非行内样式
    // getComputedStyle(box).width = "200px";
    // 非行内样式操作可以获取行内样式
    // console.log(getComputedStyle(box).background);


    // 操作：获取，设置
    // 获取：使用非行内样式的操作
    // 设置：使用行内样式的操作

    // 兼容：
        // 兼容的是正常浏览器：getComputedStyle(ele).xxx
        // IE低版本浏览器：ele.currentStyle.xxx

    // 不兼容，什么是不兼容，不兼容会怎么样？不兼容会得到undefined

    // console.log( box.currentStyle )

    // 获取样式的兼容封装
    function getStyle(ele, attr){
        return ele.currentStyle ? ele.currentStyle[attr] : getComputedStyle(ele)[attr];
    }

    console.log(getStyle(box,"width"))
    console.log(getStyle(box,"height"))
    console.log(getStyle(box,"background"))







    
</script>
</html>